<template>
  <div class="DNA_cont">
    <div class="nucleobase"></div>
    <div class="nucleobase"></div>
    <div class="nucleobase"></div>
    <div class="nucleobase"></div>
    <div class="nucleobase"></div>
    <div class="nucleobase"></div>
    <div class="nucleobase"></div>
    <div class="nucleobase"></div>
    <div class="nucleobase"></div>
    <div class="nucleobase"></div>
  </div>
</template>

<script>
import $ from 'jquery'
import { TweenMax, Circ } from 'gsap'

export default {
  mounted() {
    $(document).ready(function () {

    // RegEx psuedo SpitText
        $('.h1wrap').each(function(){
          $(this).find("h1").html( $(this).find("h1").html().replace(/./g, "<span>$&</span>").replace(/\s/g, "&nbsp;"));
        });


        function introOpen(){
          //Using ex. transform:"translate3d(x,x,x)" instead of (y:__) or (top:__) to maintain vh or em units responsiveness

          TweenMax.staggerFrom(".nucleobase", 1.2, {opacity:0.0, transform: "translateY(20vh) scale(0)", delay: 0.333, transformOrigin:'50% 50%', ease:Circ.easeOut, force3D: true},0.06)
        };

        introOpen();

    });
  }
}
</script>

<style lang='scss' scoped>
$b-height: 1.15em;
$el-size: 5px;
$DNA_scale: 1; //divides '$el-size'
$t: 2.1s;
$td: -0.89;

$c_a : rgb(255, 132, 144) rgb(255, 115, 124) rgb(245, 247, 249); // top / bottom / BG
$c2_a: rgb(255, 218, 178) rgb(255, 50, 155); // Fade-anim colors

$ease-circ: cubic-bezier(0.42 , 0, 0.58, 1);

b {
  position: relative;
  display: block;
  margin: 0 auto;
    bottom: 8.25em;
  height: auto;
  width: 15em;
  font-family: 'Product Sans', helvetica neue, helvetica, sans-serif;
  line-height: $b-height+(-0.15em);
  font-size: 0.5em;
  font-weight: 400; // letter-spacing: 0.038em;
    color: rgb(16,17,18);
  opacity: 1;
 // background-color: white;


  span {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 10em; height: 1.825em;
      line-height: $b-height+0.825em;
   text-transform: uppercase;
   font-size: 0.925em;
 //  font-weight: 800;
  letter-spacing: 0.0382em;
    color: rgb(16,17,18);
    opacity: 0.75;
    border: solid 1px ;
    border-radius: 0.5em;
    background-color: rgba(0,0,0,0.0);
    text-shadow: 0.25px 0px 0 , 0px 0.25px 0 ;
    transition: all 0.5s ease-in;
    &:hover {
      color: rgba(255, 0, 55, 0.7);
      background-color: rgba(255, 0, 115, 0.1);
      border: solid 1px rgba(255, 0, 55, 1);
    }
  }
}

h1 {
  font-family: 'Product Sans', helvetica neue, helvetica, sans-serif;
  position:absolute; // display:block;
  height: 1em;
  width: 100%;
  left: 0.005em;
 top: 7.85vh;
 // margin-bottom: 50px;
  line-height: 1.666em;
   font-size: 10.85vh; font-weight: 900;
  letter-spacing: 0.0225em;
  opacity: 0.85;

  TRANSFORM: scale(1);
  sup {}
  span {
    position:relative;
    display:inline-block;
   //   line-height: 0.62em;
  //  font-size: 7vh;
  //   letter-spacing: 0.05em;
  //  color: rgb(50,52,56);
   // opacity: 0.1;
  }

  &:after {
    content: "2";
    display: inline-block;
    position: relative;
    bottom: 1.4em; left: 0.1em;
    font-size: 4vh; font-weight: 900;
    letter-spacing: -1em;
    opacity: 0;
   // transform: translateY(0);

    animation: superscript 1.6s cubic-bezier(0.25 , 0, 0.2, 1) forwards;
    animation-delay: 500ms;
  }
}

.DNA_cont {
  display: inline-block;
  position: relative;
  transform: scale($DNA_scale);
}

.nucleobase {
  display: inline-block;
  position: relative;
  vertical-align: middle;
//  width: 1px; height: $el-size*2.75;
//  background: transparent;
//  box-shadow: $el-size*0.475 $el-size*-0.85 0 rgba(0,0,0,0.2);

  &:not(:last-child){
    margin-right: $el-size*0.6;
  }

  &:before, &:after {
    content: "";
    display: inline-block;
    width: $el-size;
    height: $el-size;
    border-radius: 50%;

    position: absolute;
  }

  @for $i from 1 through 10 {
    &:nth-child(#{$i}) {
       // animation: animDotBar $t $ease-circ infinite;

        animation-delay: $i*($td*$t);
      &:before {
       // transform: translateY(-200%);

        animation: animBefore $t $ease-circ infinite;

        animation-delay: $i*($td*$t);

        background-color: nth($c_a, 1);
      }

      &:after {
       // transform: translateY(200%);

        animation: animAfter $t $ease-circ infinite;

        animation-delay: $i*($td*$t)  ;

        background-color: nth($c_a, 2);

      //  mix-blend-mode: multiply;
      }
    }
  }
}


@keyframes animBefore {
  0% {
    top: $el-size *-2;
    z-index: 1;
  }

  25% {
    transform: scale(1.2) ;
    z-index: 1;
  }

  50% {
   // background-color: nth($c_a, 1) ;
    top: $el-size *2;
    z-index: -1;
  }

  75% {
    background-color: nth($c2_a, 1);
    transform: scale(0.8) ;
    z-index: -1;
  }

  100% {

    top: $el-size *-2;
    z-index: -1;
  }
}

@keyframes animAfter {
  0% {
    top: $el-size *2;
    z-index: -1;
  }

  25% {
    background-color: nth($c2_a, 2) ;
    transform: scale(0.8) ;
    z-index: -1;
  }

  50% {
  //  background-color: nth($c_a, 2) ;
    top: $el-size *-2;
    z-index: 1;
  }

  75% {
    transform: scale(1.2) ;
    z-index: 1;
  }

  100% {
    top: $el-size *2;
    z-index: 1;
  }
}

@keyframes animDotBar { // NOT USED
  0% {
 height: $el-size*2.75;
  }

  25% {
    height: 0;
  }

  50% {
height: $el-size*2.75;
  }

  75% {
  height: 0;
  }

  100% {
    height: $el-size*2.75;
  }
}

@keyframes superscript {
  0% {
    opacity: 0;
    transform: translateY(-1em);
  }
  100% {
    opacity: 1;
    transform: translateY(0em);
  }
}

</style>
